// IconView  图标控件
// ---
//
// className:IconView
// author: Johnny
//
// 配置
//
// | 变量 | 类型 | required | 描述 |
// |----|------|----------|-----|
// | id | string | true |控件id，当按钮配置有事件信息时必须与事件触发器中的target一致 |
// | triggers | array | false | 事件触发器,配置按钮事件在这个对象里 |
// | positionWidth | int | false | 图标大小 |
// | iconItem | string | false | 图标或图片信息 |
//
// ```
define(['./BaseView'], function(BaseView){
  return BaseView.extend({
    type: 'IconView',
    events: {
      "click .IconView": "onClick"
    },
    _getStyleFromOptions: function(){
      var styleArr = {};
      // 设置边距样式
      if (this.options.marginTop||this.options.marginRight||this.options.marginLeft||this.options.marginBottom) {
        styleArr["marginTop"] = this.options.marginTop+"px";
        styleArr["marginRight"] = this.options.marginRight+"px";
        styleArr["marginLeft"] = this.options.marginLeft+"px";
        styleArr["marginBottom"] = this.options.marginBottom+"px";
      }
      //限制组件大小范围
      var size = this.options.positionWidth;
      if (this.options.positionWidth < 10) {
        size = 10;
      }else if (this.options.positionWidth > 100) {
        size = 100;
      }
      // 判断 图标：图片，加入相应样式
      if (this.options.iconItem.display == 'imageUpload') {
        styleArr["background-image"] = "url("+ this.options.iconItem.icon +")";
        styleArr["width"] = parseInt(size) + 20 +"px";
        styleArr["height"] = parseInt(size) + 20 +"px";
      }else {
        styleArr["padding"] = "10px";
        styleArr["fontSize"] = size +"px";
        if(this.options.iconItem){
          styleArr["background"] = this.options.iconItem.bgcolor;
          styleArr["color"] = this.options.iconItem.color;
        }
        switch (this.options.iconItem.type) {
          case 'radius':
            styleArr["border-radius"] = '50%';
            break;
          case 'rectangle':
            styleArr["border-radius"] = '10px';
            break;
          case 'none':
            styleArr["background"] = 'none';
            break;
          default:
        }
      }
      return styleArr;
    },
    render: function() {
      this.$el.empty();
      var iconWraper = $("<div class='IconView'></div>");
      iconWraper.css(this._getStyleFromOptions());
      if(this.options.iconItem.display=="imageUpload"){
        iconWraper.addClass("grid-icon-img");
      }else {
        iconWraper.addClass(this.options.iconItem.icon);
      }
      this.$el.append(iconWraper);
      return this;
    },

    onClick: function(e) {
      this.triggerEvent("click");
    }
  })
})
